<template>
    <div>
        <div class="valueSearch">
            <div class="SearchContainer">
                <div class="VS_Content">
                    <div class="VSC_Img">
                        <span class="iconfont icon-sousuo"></span>
                    </div>
                    <div class="VSC_Text">
                        <p class="VSCT_Content">搜索<span>(搜索的内容)</span></p>
                        <p>书名、简介、主角、作者等</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="valueSearchContentBox">
            <div class="VSCB_Box">
                <div class="SearchContainer">
                    <div class="VSCBB_Img">
                        <!-- <span class="iconfont icon-sousuo"></span> -->
                        <span class="iconfont icon-gouwuche2 YH"></span>
                    </div>
                    <div class="VSCBB_Text">
                        <span class="VSCBBT_name">月莫</span>
                        <span class="VSCBBT_tag">作者</span>
                    </div>
                </div>
            </div>
            <div class="VSCB_Box">
                <div class="SearchContainer">
                    <div class="VSCBB_Img">
                        <!-- <span class="iconfont icon-sousuo"></span> -->
                        <span class="iconfont icon-gouwuche2 YH"></span>
                    </div>
                    <div class="VSCBB_Text">
                        <span class="VSCBBT_name">月莫</span>
                        <span class="VSCBBT_tag">作者</span>
                    </div>
                </div>
            </div>
            <div class="VSCB_Box">
                <div class="SearchContainer">
                    <div class="VSCBB_Img">
                        <!-- <span class="iconfont icon-sousuo"></span> -->
                        <span class="iconfont icon-gouwuche2 YH"></span>
                    </div>
                    <div class="VSCBB_Text">
                        <span class="VSCBBT_name">月莫</span>
                        <span class="VSCBBT_tag">作者</span>
                    </div>
                </div>
            </div>
            <div class="VSCB_Box">
                <div class="SearchContainer">
                    <div class="VSCBB_Img">
                        <span class="iconfont icon-sousuo SS"></span>
                        <!-- <span class="iconfont icon-gouwuche2 YH"></span> -->
                    </div>
                    <div class="VSCBB_Text">
                        <span class="VSCBBT_name">月莫</span>
                        <!-- <span class="VSCBBT_tag">作者</span> -->
                    </div>
                </div>
            </div>
            <div class="VSCB_Box">
                <div class="SearchContainer">
                    <div class="VSCBB_Img">
                        <span class="iconfont icon-sousuo SS"></span>
                        <!-- <span class="iconfont icon-gouwuche2 YH"></span> -->
                    </div>
                    <div class="VSCBB_Text">
                        <span class="VSCBBT_name">月莫</span>
                        <!-- <span class="VSCBBT_tag">作者</span> -->
                    </div>
                </div>
            </div>
            <div class="VSCB_Box">
                <div class="SearchContainer">
                    <div class="VSCBB_Img">
                        <span class="iconfont icon-sousuo SS"></span>
                        <!-- <span class="iconfont icon-gouwuche2 YH"></span> -->
                    </div>
                    <div class="VSCBB_Text">
                        <span class="VSCBBT_name">月莫</span>
                        <!-- <span class="VSCBBT_tag">作者</span> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    }
}
</script>

<style lang="less">

.valueSearch{
    border-bottom: 1px solid #eee;
    .VS_Content{
        display: flex;
        align-items: center;
        padding: 10px 0px;
        .VSC_Img{
            span{
                font-size: 24px;
                font-weight: bold;
            }
            margin-right: 12px;
        }
        .VSC_Text{
            p.VSCT_Content{
                font-size: 15px;
                color: #333;
                span{
                    margin-left: 10px;
                    color: #eb5050;
                }
            }
            p{
                font-size: 12px;
                color: #ccc;
            }
        }
    }
}
.valueSearchContentBox{
    .VSCB_Box{
        border-bottom: 1px solid #eee;
        .SearchContainer{
            display: flex;
            align-items: center;
            padding: 15px 0px;
            .VSCBB_Img{
                margin-right: 12px;
                span{
                    margin-left: 5px;
                }
                span.SS{
                    margin-left:8px;
                }
                span.YH{
                    font-size: 20px;
                }
            }
            .VSCBB_Text{
                span.VSCBBT_name{
                    font-size: 15px;
                    font-weight: bold;
                    margin-right: 10px;
                }
                span.VSCBBT_tag{
                    font-size: 12px;
                    padding: 2px 5px;
                    border-radius: 5px;
                    background-color: #ffda33;
                }
            }
        }
    }
}
</style>
